﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>网易云音乐</title>
    <link rel="icon" type="image/ico" href="./src/images/format.ico" />
    <link rel="stylesheet" type="text/css" href="./src/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./src/css/index.css" />
    <link rel="stylesheet" type="text/css" href="./src/css/g=2018.css" />
    <link rel="stylesheet" type="text/css" href="./src/css/g=2018csslist.css" />
    <link rel="stylesheet" type="text/css" href="./src/css/main&f=recommend.css" />


    <script type="text/javascript" src="./src/libs/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="./src/js/index.js"></script>
    <script type="text/javascript" src="./src/js/lyricScroll.js"></script>
    <script type="text/javascript" src="./src/js/qwebchannel.js"></script>
    <script type="text/javascript" src="./src/js/main&f=slide.js,recommend.js"></script>
    <script type="text/javascript" src="./src/js/g=2018function.js"></script>

    <script type="text/javascript">

        //网页需要和C++交互 服务端需要导入qwebchannel.js 这个js文件
        window.onload = function() {
            //初始化时候需要实例QWebChannel，
            if (typeof qt != 'undefined') new QWebChannel(qt.webChannelTransport, function(channel) {
                window.mSonglst = channel.objects.mSonglst;

                // 接受来自mPlayer的信号连上本地的一个方法进行信息输出
                window.mSonglst.signal_setSonglst.connect(function (message) {
                    SetSongLst(message);
                    //console.log(message);
                });

                window.mSonglst.signal_setNewSongLst.connect(function (message) {
                    SetNewSongLst(message);
                    //console.log(message);
                });

                window.mSonglst.signal_setHotSongLst.connect(function (message) {
                    SetHotSongLst(message);
                    //console.log(message);
                });

                window.mSonglst.setList();

                // 双击搜索列表tr播放
                $infoList_search = $("#infoList_search"),// 搜索列表
                $infoList_search.on("dblclick", "tr", function () {
                    //playMusic($infoList_search.find("tr"), this);
                    //console.log($infoList_search.find("tr"));

                    window.mSonglst.playSong(this.dataset.id);
                });


                $newTablePlay = $("#newTablePlay"),
                $newTablePlay.click(function () {
                    console.log("#newTablePlay");
                    window.mSonglst.playNewSong();
                });

                $hotTablePlay = $("#hotTablePlay"),
                $hotTablePlay.click(function () {
                    window.mSonglst.playHotSong();
                });

            });
        }

        //设置新歌榜
        function SetNewSongLst(songInfo) {
            //获取json格式的数据
            //console.log(songInfo);
            var songs = $.parseJSON(songInfo);
            //console.log(songs[0]['songHash']);
            var listLen = songs.length;
            var listHtml = '';

            for (var i = 0; i < listLen && i < 8; i++) {
                var ary = ["n1", "n2", "n3", "n4", "n5", "n6", "n7", "n8"];
                //console.log(ary[i]);
                listHtml += `
                            <tr data-song="" class ="" data-copytype="1">
                            <th><i class = "` + ary[i] + `" ></i></th>
                            <td class ="s_title">
	                            <span class ="s_title_txt s_title_icon_2" title= "` + songs[i]['songName'] + `" > ` + songs[i]['songName'] + ` </span>
                            </td>
                            <td class ="fct"><div class ="fct_btn"><a href="javascript:;" data-page="recommend_new" class ="play" title="播放"></a></div></td>
                            <td class ="u_title"> `+ songs[i]['songer'] + ` </td>
                            </tr>
						`;
            }

            //console.log(listHtml);

            //// refreshDOM
            $("#infoList_new").html(listHtml);
        }

        //设置热歌榜
        function SetHotSongLst(songInfo) {
            //获取json格式的数据
            //console.log(songInfo);
            var songs = $.parseJSON(songInfo);
            //console.log(songs[0]['songHash']);
            var listLen = songs.length;
            var listHtml = '';

            for (var i = 0; i < listLen && i < 8; i++) {
                var ary = ["n1", "n2", "n3", "n4", "n5", "n6", "n7", "n8"];
                //console.log(ary[i]);
                listHtml += `
                            <tr data-song="" class ="" data-copytype="1">
	                            <th><i class = "` + ary[i] + `" ></i></th>
	                            <td class ="s_title">
		                            <span class ="s_title_txt s_title_icon_1" title= "` + songs[i]['songName'] + `" > ` + songs[i]['songName'] + ` </span>
	                            </td>
	                            <td class ="fct"><div class ="fct_btn"><a href="javascript:;" class ="play" data-page="recommend_hot" title="播放"></a></div></td>
	                            <td class ="u_title"> `+ songs[i]['songer'] + ` </td>
                            </tr>
						`;
            }

            //console.log(listHtml);

            //// refreshDOM
            $("#infoList_hot").html(listHtml);
        }

    </script>
</head>
<body>

    <!-- page_main 主页 -->
    <div class="page_main R_page main_container" id="pageMain" style="display:block;">
        <!--<div id="useScroll" style="position: relative; overflow: hidden;">-->
        <div class="main_container">
            <div class="scroll_wrap" style="position:relative;top:0;">
                <div class="sectionBox clearfix">
                    <!-- banner begin -->
                    <div class="bannerWrapper fl" id="focusImg">
                        <ul class="banner_con" style="width: 4352px; left: -1088px;">
                            <li data-code="6" style="position: static; left: 4352px;"><img src="./src/images/pic_1.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_2.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_3.jpg" alt="" /></li>
                            <li data-code="7"><img src="./src/images/pic_4.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_5.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_6.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_7.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_8.jpg" alt="" /></li>
                        </ul>
                        <div class="banner_num">
                            <a class="prev_btn prev_next png" style="display: none;"></a>
                            <a class="next_btn prev_next png" style="display: none;"></a>
                        </div>
                    </div>
                    <!-- banner end   -->
                    <div class="sideBox fr" id="newPlayRadio" style="background:url(&#34;./src/images/bg1.png&#34;)">
                        <!--<img src="./src/images/more_dt.png" usemap="#more_link" id="radioPic" style="display: block;" />
                        <map name="more_link" id="more_link">
                            <area shape="polygon" coords="0 0,29 0,57 29,57 57" alt="更多电台" id="jumptoRadio" />
                        </map>-->
                    </div>
                </div>
            </div>

            <!-- 热门榜单start -->
            <div class="sectionWrapper bangdanWrapper clearfix">
                <div class="section_title_box">
                    <h3>热门榜单</h3>
                    <!--<a class="more_btn" id="moreBdLink">更多</a>-->
                </div>
                <!-- 新歌榜start -->
                <div class="bangdan_con new_con fl">
                    <div class="bangdan_title event_main_table_btn">
                        <div id="newTablePlay"><a class="play_icon png play_btn event_play_all_bd" title="播放列表中全部歌曲" ></a></div>
                        <a class="linkB" data-code="1">完整榜单</a>
                    </div>
                    <div id="rcBangdanTable" class="main_table_wrap" oncontextmenu="return false" onselectstart="return false">
                        <table class="rc_bangdan_table left_table main_table">
                            <tbody  id="infoList_new">

                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 新歌榜end -->
                <!-- 热歌榜start -->
                <div class="bangdan_con hot_con fr">
                    <div class="bangdan_title event_main_table_btn">
                        <div id="hotTablePlay"><a class="play_icon png play_btn event_play_all_bd"></a></div>
                            <a class="linkB" data-code="2">完整榜单</a>
                        </div>
                    <div id="hotBangdan" class="main_table_wrap" oncontextmenu="return false" onselectstart="return false">
                        <table class="rc_bangdan_table left_table main_table">
                            <tbody id="infoList_hot">
                            
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 热歌榜end -->
            </div>
            <!-- 热门榜单end -->
        </div>
      </div>
       

</body>
</html>
